Challenge: Sizing and decorating a content panel

In this challenge you are provided with a lightly-styled page structure that renders a content panel containing text and images, with a heading at the top and a button bar at the bottom. We want you to follow the instructions to size and decorate it, producing an interesting layout as a result. Along the way, we'll test your knowledge of CSS values and units, sizing, overflow, and backgrounds and borders.

](https://developer.mozilla.org/pong/click?code=aHR0cHM6Ly9zcnYuYnV5c2VsbGFkcy5jb20vYWRzL2NsaWNrL3gvR1RORDQyN1VDWUJJS0szTkY2U0xZS1FVQ0FTSTQySllDVjdEQ1ozSkNBU0k1S0o3RlQ3SVRLSktGVFNETDIzV0Y2N0RMSzc3Q1ZTSVA1M0xDWUJETDUzS0M2U0k1MkpOQzZZREVLM0VISk5DTFNJWg%3D%3D.GG1M5mwDTUvDWhdUb1KkMpnD59a7TfPSAHTYFkfjlng%3D&version=2)Ad

Starting point

We are going to get you to solve this challenge on your local development environment; ideally, you'll want to view the example in a full browser window to make sure you are going in the right direction.

Create a new folder on your computer called size-decorate-content-panel.

Inside the folder, create an index.html file and paste the following content into it:

htmlCopyPlay

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Challenge: Content pane with button bar</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <section class="pane">
      <h1>Content pane</h1>
      <div class="content">
        <h2>Some exciting content</h2>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Proin tortor purus <a href="#">platea sit eu id</a>
          nisi litora libero. Neque vulputate consequat ac amet augue
          blandit maximus aliquet congue. Pharetra vestibulum posuere
          ornare <a href="#">faucibus fusce dictumst</a> orci aenean eu
          facilisis ut volutpat commodo senectus purus himenaeos fames
          primis convallis nisi.
        </p>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/leopard.jpg"
          alt="Closeup of a large wild cat's eyes and nose" />
        <p>
          Phasellus fermentum malesuada phasellus netus dictum aenean
          placerat egestas amet. <a href="#">Ornare taciti semper dolor
          tristique</a> morbi. Sem leo tincidunt aliquet semper eu lectus
          scelerisque quis. Sagittis vivamus mollis nisi mollis enim
          fermentum laoreet.
        </p>

        <h2>More exciting content</h2>

        <p>
          Curabitur semper venenatis lectus viverra ex dictumst nulla
          maximus. Primis iaculis elementum conubia feugiat venenatis
          dolor augue ac blandit nullam ac <a href="#">phasellus turpis</a>
          feugiat mollis. Duis lectus porta mattis imperdiet vivamus augue
          litora lectus arcu. Justo torquent pharetra volutpat ad blandit
          bibendum <a href="#">accumsan nec elit cras</a> luctus primis
          ipsum gravida class congue.
        </p>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg"
          alt="Three colorful hot air balloons floating across a blue, nearly cloudless sky" />
        <p>
          Vehicula etiam elementum finibus enim duis feugiat commodo
          adipiscing tortor <a href="#">tempor elit</a>. Et mollis
          consectetur habitant turpis tortor consectetur adipiscing
          vulputate dolor lectus iaculis convallis adipiscing. Nam
          hendrerit <a href="#">dignissim condimentum ullamcorper diam</a>
          morbi eget consectetur odio in sagittis.
        </p>
      </div>
      <div class="controls">
        <button>One</button>
        <button>Two</button>
        <button>Three</button>
        <button>Four</button>
      </div>
    </section>
  </body>
</html>

Inside the folder, create a style.css file and paste the following content into it:

cssCopyPlay

/* Type and text */

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: inherit;
  font: 1.2em / 1.5 system-ui;
  margin: 0 auto;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

a {
  color: red;
}

a:hover,
a:focus {
  text-decoration: none;
}

/* Styling the pane */

.pane {
  height: 100%;
}

h1,
.controls {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
}

.controls {
  justify-content: space-around;
  gap: 20px;
  padding: 20px;
}

button {
  flex: 1;
}

Save your files and load index.html in a browser ready to test.

Project brief

Follow the steps below to complete the project, sizing the content pane appropriately and adding the required decorations.

Headings

Use generated content to make a book emoji (📖) appear at the start of the top-level heading. Add 20px of spacing in between the emoji and the heading text.
Currently, the headings are sized in ems. We'd like you to change the sizing so that it is responsive, changing based on the viewport width but also remaining zoomable. To achieve this, make each heading level's sizing equal to a suitable percentage of the viewport width plus a smaller em value.

Container sizing

Make the width of the <section> wrapper element with a class of pane equal to 60%, but give it a maximum width of 1000px and minimum width of 480px. See if you can find a CSS function that allows you to set this using a single declaration.
Center the pane <section> horizontally on the page using auto margins.
Set the <h1> and the <div> with a class of controls to both be 100px high. Set the <div> with a class of content to be 100% of the <body> height, minus the height of the <h1> and the <div class="controls">. This should give you a UI that always stretches to be the height of the viewport, with a flexible content container and a fixed height heading and button bar.
The buttons look a bit thin and hard to read. Give them a height of 100% of their container, and a font size of 1.2em.
Give the pane <section> and the content <div> top/bottom padding of 0 on both sides and left/right padding of 20px on both sides.

Image placement

The images currently overflow the content container. Set a maximum width of 90% on them to stop this happening.
Center the images horizontally using auto margins.

Decoration

Apply a linear gradient to the pane <section> that changes smoothly from #9fb4c7 at the top to #7f7caf at the bottom.
Give the images a 1px solid border and the content <div> a 2px solid border. Give the borders a color of #28587b.
Give the content <div> a background color of #eeeeff, and a background image of https://mdn.github.io/shared-assets/images/examples/big-star.png. The background image should not repeat, should be sized at 40px by 40px, and should be placed 5px from the top of the container and 15px from the right.
Give the buttons a text color of white and a background color of rgb(40 88 123 / 0.8). On hover or focus, the buttons should change to have a fully opaque version of the same background color.
Set a 10px border radius on the content <div> and the buttons.

Overflow

At this point, you should still notice a problem with the UI — the content contained in the content <div> overflows its container, and the whole page scrolls to allow you to access it all. We want the content <div> to scroll instead. How can you achieve this?

Hints and tips

Use the W3C CSS Validator to catch unintended mistakes in your CSS — mistakes you might have otherwise missed — so that you can fix them.
You don't need to alter the HTML in any way.

Example

The starting state of the project will render like this:

Play

The finished project should look like this (we've rendered this at 90% width, not 60%, so it looks better in the narrow output pane):

Play

Click here to show a possible solution

The finished CSS looks like so:

Help improve MDN

Was this page helpful to you?

YesNo

Learn how to contribute

This page was last modified on Oct 16, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content

Filter sidebar

Your blueprint for a better internet.

MDN

Contribute

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.